import React, { Component } from 'react'

import { connect } from "react-redux"
import action from '../../../store/action/index.js'

import Banner from '../../../components/banner/banner.js';

import RouterLink from '../../../router/RouterLink.js';
import RouterView from '../../../router/RouterView.js';
import { withRouter } from 'react-router-dom'

import "./store_list.less"

import * as APIS from "../../../apis/get_apis.js"

import cookies from "js-cookie"

const AMap = window.AMap
class StoreList extends Component {

  state = {
    start: null,
    end: null,
    diffY: null,
    old: null,
    boxstate: false,
    spacing: null,//自身定位距离店铺
  }
  listbox = null
  render() {
    let { routes, selfClassName, boxstate } = this.props
    // console.log(this.props.storeMess[0].store_mess);
    return (
      <div className="store_list"
        ref={(listbox) => { this.listbox = listbox }}
        onScroll={this.scll}>

        {/* 门店商品广告 */}
        <div className="store_list_cont_adver">
          <Banner flag={false} />
        </div>
        <div className="store_list_top">
          {/* 此思路为设置门店列表表头 */}
          <span className="iconfont icon-fanhui2 store_list_top_span" onClick={() => {
            // 跳路由
            this.props.history.push(JSON.parse(sessionStorage.getItem("router")))
            // console.log(this.props);
          }} ></span>
          <h2>
            {
              this.props.collection_store === "1" ? <i className="iconfont icon-shoucang2 store_list_top_collect1" onClick={() => {
                // 取消收藏
                this.changeStoreCollect()
              }}>已收藏</i>
                : <i className="iconfont icon-shoucang3 store_list_top_collect" onClick={() => {
                  // 收藏
                  this.changeStoreCollect()
                }}>收藏</i>
            }
            {
              this.props.storeMess.length > 0 ?
                <span onClick={() => { this.lookStoreDtail() }}>{this.props.storeMess[0].store_mess}</span>
                : null
            }

            <i className="iconfont icon-fanhui1"></i>
          </h2>
          <p>距离您{this.state.spacing}km</p>
          <p>线上点餐时间：10：00 ~ 5:00</p>
          <p>线下营业时间：8：30 ~ 20：30</p>
        </div>
        {/* 门店内容详情 */}
        <div className="store_list_cont" ref="store_list_cont">
          <div className="store_list_cont_top" ref="store_list_cont_top">
            <RouterLink routes={routes} selfClassName={'storeListContLink'} />
          </div>
          {
            boxstate ? <div className="store_list_cont_td"></div> : null
          }
          <div className="store_list_cont_btm" ref="store_list_cont_btm">
            <RouterView routes={routes} />
          </div>

        </div >
      </div >
    )
  }

  // 收藏调接口
  changeStoreCollect = () => {
    this.props.changeStoreCollect({
      store_id: this.props.storeMess[0].store_id,
      user_id: cookies.get('user_id')
    })
  }

  // 查看店铺详情
  lookStoreDtail = () => {
    this.props.history.push('/store_detail')
  }

  componentDidMount() {
    // 加载获取店铺数据
    let { getStoreData } = this.props
    getStoreData({
      store: JSON.parse(sessionStorage.getItem("store_id")),
      user_id: cookies.get('user_id')
    })
    this.juli()
  }
  scll = () => {
    let { start, end, boxstate } = this.state
    if (this.listbox.scrollTop > this.refs['store_list_cont'].offsetTop) {
      this.refs['store_list_cont_top'].style.position = 'fixed'
      this.refs['store_list_cont_top'].style.top = 0
      this.refs['store_list_cont_top'].style.left = 0
      this.refs['store_list_cont_btm'].style.marginTop = '10vh';
      this.setState({ boxstate: true })
    } else {
      this.setState({ boxstate: false })
      this.refs['store_list_cont_top'].style.position = ""
      this.refs['store_list_cont_btm'].style.marginTop = '0';
    }

  }
  juli = () => {
    let store_site = JSON.parse(localStorage.getItem("store_site")).split(",")
    let list_personal_locator = JSON.parse(localStorage.getItem("list_personal_locator"))
    var dis = AMap.GeometryUtil.distance(store_site, list_personal_locator);
    this.setState({ spacing: (dis / 1000).toFixed(2) })
  }

}

export default connect(state => state.foodf, action.foodf)(withRouter(StoreList))
